<template>
    <div class="loginContainer">
        <div class="loginHeader">
            <div class="appName">Vue3-Typescript-Admin管理系统</div>
        </div>
        <el-card class="login-card">
            <div class="layout-login" @keyup="enterSubmit">
                <el-form
                    ref="ruleForm"
                    label-position="right"
                    label-width="60px"
                    :model="form"
                    :rules="rules"
                >
                    <el-form-item label="用户名" prop="account">
                        <el-input v-model="form.account" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" type="password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="onSubmit"
                            :loading="loading"
                        >{{ loading ? '正在登录' : '登录' }}</el-button>
                    </el-form-item>
                </el-form>
                <div style='text-align:center;color:#999;font-size:12px'>admin/123456</div>
                <div style='text-align:center;color:#999;font-size:12px'>test/test</div>
            </div>
        </el-card>
        <div class="loginFooter">版权所有 <a href='https://gitee.com/yan_web/Admin-vue3-element-plus-typescript-vite'>web_yan</a></div>
    </div>
</template>

<script lang="ts">
import {  loginParam } from '/@/api/layout'
import { useRouter, useRoute } from 'vue-router'
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { store } from '/@/store/index'
import { ElNotification } from 'element-plus'
import { validate, resetFields } from '/@/utils/formExtend'

const formRender = (_state: { loading: boolean }) => {
    const router = useRouter()
    let form:loginParam = reactive({
        account: 'admin',
        password: '123456',
    })
    const ruleForm = ref(null)
    const enterSubmit = (e: KeyboardEvent) => {
        if (e.key === 'Enter') {
            onSubmit()
        }
    }
    const onSubmit = async () => {
        let { account, password } = form
        if (!await validate(ruleForm)) return
        _state.loading = true
        await store.dispatch('user/login', { account: account, password: password}).finally(() => {
            _state.loading = false
        })
        ElNotification({
            message: '登录成功',
            type: 'success'
        })
        router.replace({ path: '/Dashboard' })
    }
    const rules = reactive({
        account: [
            {
                validator: (_rule: any, value: any, callback: (arg0?: Error | undefined) => void) => {
                    if (!value) {
                        return callback(new Error('用户名不能为空'))
                    }
                    callback()
                }, trigger: 'blur'
            }
        ],
        password: [
            {
                validator: (_rule: any, value: any, callback: (arg0?: Error | undefined) => void) => {
                    if (!value) {
                        return callback(new Error('密码不能为空'))
                    }
                    callback()
                }, trigger: 'blur'
            }
        ],
        verifyCode: [
            {
                validator: (_rule: any, value: any, callback: (arg0?: Error | undefined) => void) => {
                    if (!value) {
                        return callback(new Error('验证码不能为空'))
                    }
                    callback()
                }, trigger: 'blur'
            }
        ]
    })
    return {
        form,
        onSubmit,
        enterSubmit,
        rules,
        resetFields,
        ruleForm
    }
}
export default defineComponent({
    name: 'Login',
    setup() {
        const state = reactive({
            loading: false,
        })
        onMounted(()=>{
            
        })
        return {
            ...toRefs(state),
            ...formRender(state)
        }
    }
})
</script>

<style lang='less'>
.loginContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
    background: url(../../assets/images/loginBg.jpg) no-repeat;
    background-size: cover;
    .login-card {
        width: 400px;
        position: absolute;
        top: 50%;
        margin-top: -200px;
        left: 50%;
        margin-left: -250px;
        .el-card__body {
            padding: 40px 40px 20px 40px;
            .el-button {
                width: 100%;
            }
        }
    }
    .verifyWrap {
        .el-input-group__append {
            padding: 0 10px;
            .el-image {
                width: 65px;
            }
        }
    }
    .loginHeader {
        background-color: #23262e;
        height: 60px;
        z-index: 1000;
        position: relative;
        .appName {
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 100%;
            padding:0 20px;
            line-height: 60px;
            text-align: left;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
        }
    }
    .loginFooter {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 44px;
        line-height: 44px;
        padding: 0 15px;
        background-color: rgba(255,255,255,.1);
        font-size: 12px;
        text-align: center;
        color: #fff;
    }
}
#c{position: absolute;left:0;top:0;}
</style>